<%@ page import="com.example.softwareconfigurationcoursedesign.Product" %>
<%@ page import="com.example.softwareconfigurationcoursedesign.ProductService" %>
<%@ page import="java.util.List" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html;charset=UTF-8" %>


<html>
<head>
    <title>购物界面</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to right, #fee0a2, #f98d92, #ce65af, #8e51d3);
        }
        section {
            padding: 50px;
            color: #fff;
        }

        button {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 35px;
            line-height: 5px;
            text-align: center;
            color: rgb(0, 0, 0);
            font-size: 24px;
            text-decoration: none;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 30px;
        }

        button:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 400% 0;
            }
        }


        button:before {
            content: '';
            position: absolute;
            left: -5px;
            top: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 10px;
            opacity: 0;
            transition: all 1s;
        }

        button:hover:before {
            filter: blur(20px);
            opacity: 1;
        }
        section h2 {
            font-size: 24px;
            line-height: 80px;
        }

        section p {
            font-size: 16px;
        }

        /* (3) 清除原本的滚动条 */
        ::-webkit-scrollbar {
            width: 0;
        }

        /* (4) 设置自定义滚动条的样式 并 定义动画 */
        #scrollPath {
            position: fixed;
            top: 0;
            right: 0;
            width: 10px;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.05);
        }

        #progressbar {
            position: fixed;
            top: 0;
            right: 0;
            width: 10px;
            background: linear-gradient(to top, #008aff, #00ffe7);
            animation: animate 5s linear infinite;
        }

        /* 定义色调转换的动画 */
        @keyframes animate {
            0%, 100% {
                filter: hue-rotate(0deg);
            }
            50% {
                filter: hue-rotate(360deg);
            }
        }

        /* (5) 新建伪元素，设置光效 */
        #progressbar::before {
            content: '';
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #008aff, #00ffe7);
            filter: blur(10px);
        }


        .product_img {
            min-height: 200px;
            min-width: 200px;
            max-width: 200px;
            max-height: 200px;
            width: auto;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        iframe {
            border: none;
            overflow: hidden;
        }

        .iframe_mobile {
            position: fixed;
            top: 75%;
            left: 75%;
            width: 300px;
            height: 200px;
        }


        .box .content h3 {
            font-size: 20px;
            margin: 10px 0;
        }

        .box .content p {
            line-height: 25px;
        }

        .box a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

            color: #000;
            text-decoration: none;

            border-radius: 4px;
            font-weight: 500;
            margin-top: 20px;
            cursor: pointer;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

    </style>
</head>
<body>
<div id="progressbar"></div>
<div id="scrollPath"></div>
<section>
    <div class="button-container" style="text-align: right; font-size: 12px">
        <button name="login" style="font-size:16px; line-height: 5px; ">登录|注册</button>
    </div>
    <iframe src="mobile_menu.html" id="mobile" class="iframe_mobile"></iframe>
    <iframe src="menu.html" width=100% height=80%></iframe>
    <table>
    <%-- Java代码部分，获取产品信息并存储在Java变量 --%>
    <%
        Connection connection;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String jdbcUrl = "jdbc:mysql://localhost:3306/course_design";
            String username = "root";
            String password = "123456";
            connection = DriverManager.getConnection(jdbcUrl, username, password);
            connection.createStatement();
        } catch (Exception ignored) {
        } finally {
        }
    %>
    <%
        ProductService productService = new ProductService();
        List<Product> productList = productService.getProductListFromDatabase(); // 从数据库中获取产品列表
    %>

        <table>
            <tr>
                <th>商品</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <% for (Product product : productList) { %>
            <tr>
                <td>
                    <a href="<%=product.getDetail()%>" target="_blank">
                        <img src="<%= product.getPurl() %>" alt="<%= product.getPname() %>" class="product_img">
                    </a>
                </td>
                <td>
                    <h3><%= product.getPname() %>
                    </h3>
                    <p>价格：￥<%= product.getPprice() %>
                    </p>
                </td>
                <td>
                    <button onclick="function addToCart(name) {
                            let cart = [];
                            if (document.cookie.includes('cart=')) {
                            const cookies = document.cookie.split(';');
                            for (let i = 0; i < cookies.length; i++) {
                            const cookie = cookies[i].trim();
                            if (cookie.startsWith('cart=')) {
                            const cartJSON = decodeURIComponent(cookie.substring(5));
                            cart = JSON.parse(cartJSON);
                            break;
                            }
                            }
                            }
                            // 将商品名称添加到购物车数组
                            cart.push(name);
                            const cartJSON1 = JSON.stringify(cart);
                            document.cookie = 'cart=' + encodeURIComponent(cartJSON1) + '; expires=Thu, 01 Jan 2024 00:00:00 UTC; path=/;';
                            window.alert('商品'+name+'已经加入购物车')
                            }
                            addToCart('<%= product.getPname() %>')" class="button">+
                    </button>
                </td>
            </tr>
            <% } %>
        </table>
    </table>
</section>
<script>

    // 第三步：添加JS，实现滚动动态调整进度条高度
    // 1. 获取进度条元素
    let progress = document.getElementById('progressbar')
    // 2. 最大可滚动高度 = 全部内容高度 - 可视区高度
    let totalHeight = document.body.scrollHeight - window.innerHeight
    // 3. 监听滚动
    window.onscroll = function () {
        // 4. 计算进度条高度百分比
        //    进度条高度百分比 = (已滚动的 Y 距离 / 最大可滚动高度) * 100
        let progressHeight = (window.pageYOffset / totalHeight) * 100
        progress.style.height = progressHeight + '%'
    }

    window.addEventListener('message', (event) => {
        // 确保消息来自iframe的源
        if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
            const message = event.data;

            if (message.type === 'buttonClick') {
                // 处理按钮点击事件
                console.log(message.data);
                scrollTo({top: 0, behavior: 'smooth'});
            }
        }
    });
    window.addEventListener('CartMessage', (event) => {
        // 确保消息来自iframe的源
        if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
            const message = event.data;

            if (message.type === 'CartButtonClick') {
                // 处理按钮点击事件
                console.log(message.data);
                window.location.href = 'shopcar.jsp'
            }
        }
    });
    let cartAnimation = document.getElementById('cart-animation');
    let iframeMobile = document.getElementById('mobile');

    function addToCart(name) {
        // 创建一个新的动画元素
        let animationElement = cartAnimation.cloneNode(true);
        animationElement.style.opacity = 1;
        document.body.appendChild(animationElement);

        // 获取按钮的位置
        let button = event.target;
        let buttonRect = button.getBoundingClientRect();

        // 获取 iframe 的位置
        let iframeRect = iframeMobile.getBoundingClientRect();

        // 计算动画起始和结束点
        let startX = buttonRect.left + buttonRect.width / 2;
        let startY = buttonRect.top + buttonRect.height / 2;
        let endX = iframeRect.right;
        let endY = iframeRect.bottom;

        // 计算抛物线参数
        let a = (endY - startY) / ((endX - startX) ** 2);

        // 开始动画
        animateCart(animationElement, startX, startY, endX, endY, a);
        window.alert("商品:  " + name + "  已经放进购物车,期待您的购买!")
    }

</script>
</body>
</html>